<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>展华科技产品集团用户管理系统</title>
  <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
  <!-- Bootstrap 3.3.2 -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <!-- FontAwesome 4.3.0 -->
  <link href="plugins/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <!-- Theme style -->
  <link href="css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link href="css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
  <!-- Date Picker -->
  <link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
  <!-- Daterange picker -->
  <link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
  <!-- bootstrap wysihtml5 - text editor -->
  <link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
  <!-- bootstrap checkbox -->
  <link href="plugins/bootstrap-checkbox/css/bootstrap-checkbox.css" rel="stylesheet" type="text/css" />
  <link href="css/app.css" rel="stylesheet" />
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="http://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
<script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
<script src="js/diandongche.js" type="text/javascript"></script>
</head>
<body class="skin-blue" >
<div class="wrapper">
  <header class="main-header">
    <!-- Logo -->
    <a href="/" class="logo">展华集团用户管理系统</a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">切换侧边栏</span>
      </a>
      
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
  <!-- sidebar: style can be found in sidebar.less -->
  <section class="sidebar">
    <!-- sidebar menu: : style can be found in sidebar.less -->
    <ul class="sidebar-menu" id="sidebar-menu">
      
    </ul>
    <script>
        ddche.leftNav();
    </script>
  </section>
  <!-- /.sidebar -->
</aside>
    <!--********************************************************************************************** -->
<aside class="right-side">
    <section class="content">
<div class="box box-success" id="priceList">
    <div class="box-header">
      <h3 class="box-title ">充值</h3>
    </div>
    <div class="box-body table-responsive no-padding">
      <div class="box-body car-recharge" style="padding: 10px 15px;">
        <form class="form-horizontal j-user-info-form" action="/api/user/update" method="post" data-parsley-validate target="z-user-info-iframe">
            <input type="hidden" name="id" />
            <input type="hidden" name="vendorId" />
              <div class="form-group">
            <label class="col-sm-3 control-label">型号:</label>
            <div class="col-sm-6 control-label-left" id="dtype">
            </div>
          </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">车辆:</label>
             <div class="col-sm-6 control-label-left" id="deviceList">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">单价:</label>
            <div class="col-sm-6 control-label-left">
             <span class="pull-left badge bg-red"><b id="price">60</b>元/年</span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">总计:</label>
             <div class="col-sm-6 control-label-left" id="total">
              
            </div>
          </div>
         
          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
              <button type="submit" class="btn btn-primary" id="toPay">下一步</button>
            </div>
          </div>
        </form>
         <iframe id="z-user-info-direct" name="z-user-info-iframe" style="display:none;"></iframe>
      </div>
    </div>
    <div class="box-footer clearfix">
    </div>
  </div><!-- /.box (chat box) -->

  <div class="box box-success" id="payType" style="display:none;">
    <div class="box-header">
      <h3 class="box-title ">选择支付方式</h3>
    </div>
    <div class="box-body table-responsive no-padding car-recharge-pay">
        <div class="nav-tabs-custom">
          <!-- Tabs within a box -->
          <ul class="nav nav-tabs pull-right">
            <!--   <li style="float:left;" class="active"><a href="#revenue-chart" data-toggle="tab">银行卡</a></li> -->
              <li style="float:left;" class="active"><a href="#sales-chart" data-toggle="tab">支付宝</a></li>
          </ul>
          <div class="tab-content no-padding">
              <!-- Morris chart - Sales -->
              <!-- <div class="chart tab-pane active" id="revenue-chart" style="position: relative;">
              
              模糊查询
                
                <div class="col-lg-3">
                    <label>
                      <input type="checkbox">中国工商银行 
                    </label>
                </div>
                <div class="col-lg-3">
                    <label>
                      <input type="checkbox">中国建设银行 
                    </label>
                </div>
                <div class="col-lg-3">
                    <label>
                      <input type="checkbox">中国农业银行 
                    </label>
                </div>
                <div class="col-lg-3">
                    <label>
                      <input type="checkbox">招商银行 
                    </label>
                </div>
                <div class="col-lg-3">
                    <label>
                      <input type="checkbox">交通银行 
                    </label>
                </div>
                <div class="col-lg-3">
                    <label>
                      <input type="checkbox">浦发银行 
                    </label>
                </div>
              
               
              模糊查询结束
              </div> -->
              <div class="chart tab-pane active" id="sales-chart" style="position: relative;">
              <!--支付宝-->
                <div class="col-lg-3">
                    <label>
                      <input type="radio" name="payType" value="01">支付宝 
                    </label>
                </div>
     
              <!--支付宝结束 -->
              </div>
          </div>
        </div><!-- /.nav-tabs-custom -->
      
            <div class="col-sm-12">
              <button type="submit" class="btn btn-primary" id="goPay">下一步</button>
            </div>
    </div>
    <div class="box-footer clearfix">
    </div>
  </div><!-- /.box (chat box) -->
    </section>
  </aside>
    <!--********************************************************************************************** -->

</div><!-- /.content -->
</div><!-- /.content-wrapper -->
<footer class="main-footer">
  <div class="pull-right hidden-xs">
    <b>电话：0755-82049709&nbsp;&nbsp;邮箱：zhanhuakj@foxmail.com&nbsp;&nbsp;深圳市车公庙天安数码时代大厦A座2207-2208号</b>
  </div>
  <strong>Copyright &copy; 2014-2025 <a href="#">深圳市展华科技有限公司</a>.</strong>
</footer>
</div><!-- ./wrapper -->

<script>
  $(function(){
    var imeiList=ddche.GetQueryString("imeiList").split(",");
    var numList=ddche.GetQueryString("numList").split(",");
    var type=ddche.GetQueryString("type");

    $("#dtype").html(type);
    var html="";
    for(var i=0;i<imeiList.length;i++){
      html+="<label data-imei='"+imeiList[i]+"'>浙A"+numList[i]+" "+imeiList[i]+"<br/></label>";
    }
    $("#deviceList").html(html);

    $("#total").html(imeiList.length+" * "+$("#price").html()+" = "+(parseInt($("#price").html())*imeiList.length));


    //下一步
    $("#toPay").click(function(){
     
      $("#payType").show();
      $("#priceList").hide();
    });

    //支付
    $("#goPay").click(function(){
      if(!$("[name='payType']:checked").val()){
        
            $(".model_alert").modal().find(".modal-body").html("请选择支付方式！");
        return;

      }
      var detailList=[];
      for(var i=0;i<$("#deviceList label").length;i++){
        detailList[i]={
          imei:$("#deviceList label").attr("data-imei"),
          amount:$("#price").html()
        }
      }
      $(".modal_load").modal();
       $.ajax({
        type:"post",
        url:"/api/charge",
        data:{
          paymentPlatform:$("[name='payType']:checked").val(),
          money:(parseInt($("#price").html())*imeiList.length),
          detail:detailList
        }
      }).done(function(data){
          if(data.code){
            location.href=paymentURL;
          }else{
            $(".model_alert").modal().find(".modal-body").html("跳转支付失败！");
          }
            $(".modal_load").modal("hide");
      }).fail(function(data){
            $(".model_alert").modal().find(".modal-body").html("跳转支付失败！");

            $(".modal_load").modal("hide");
      });
    });
  });
</script>

<!--  -->
<div class="modal modal_load" tabindex="-1" role="dialog" data-toggle="modal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="border-radius:10px;">
            <div class="modal-body" style="overflow:hidden;">
                  <div class="overlay" style="text-align:center;">
                  <i class="fa fa-refresh fa-spin"></i> loading
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade model_alert" tabindex="-1" role="dialog" data-toggle="modal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary modal-confirm" data-dismiss="modal">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--  -->
<!-- jQuery 2.1.3 -->
<!-- parsley.js -->
<script>
window.ParsleyConfig = {
  errorsWrapper: '<span class="parsley-error"></span>',
  errorTemplate: '<span></span>'
};
</script>
<script src="plugins/bower_components/parsleyjs/dist/parsley.js"></script>
<script src="plugins/bower_components/parsleyjs/src/i18n/zh_cn.js"></script>
<!-- jQuery UI 1.11.2 -->
<script src="plugins/jQueryUI/jquery-ui.min.js" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.2 JS -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Bootstrap-Checkbox -->
<script src="plugins/bootstrap-checkbox/js/bootstrap-checkbox.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- Momentjs-->
<script src='plugins/moment/moment.js'></script>
<!-- Jquery serializeJson-->
<script src="plugins/serialize-object/jquery.serialize-object.min.js"></script>
<!-- AdminLTE App -->
<script src="js/app.min.js" type="text/javascript"></script>
</body>
</html>